<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-10-21 16:50:06
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-03-29 10:34:42
-->
<template>
  <div>
    <el-dialog
      title="查看并打印"
      :visible.sync="dialog.printShow"
      width="50%"
      @close="printClose"
      :close-on-click-modal="false"
    >
      <el-button type="primary" size="default" v-print="printObj">
        打印
      </el-button>
      <el-button type="primary" size="default" @click="exportImg">
        导出学员所有图片
      </el-button>
      <div class="basics-information" id="printMe">
        <div class="title">
          <h1>学员信息</h1>
        </div>
        <div class="stuInfo">
          <div class="subclass" v-for="(item, index) in stuInfo" :key="index">
            <div class="subclass-sub" v-if="item.type == 9">
              <span class="subclass-name"> {{ item.name }}：</span>
              <span>
                <img class="imgUp" :src="item.data" alt="" />
              </span>
            </div>
            <div v-else-if="item.type == 10" class="subclass-sub">
              <span class="subclass-name">{{ item.name }}：</span>
              <span>
                <a :href="item.data" style="color: #3065f1"> 下载附件 </a>
              </span>
            </div>
            <div class="subclass-sub" v-else>
              <span class="subclass-name">{{ item.name }}：</span>
              <span class="subclass-word">{{ item.data }}</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="dialog.printShow = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPrint, downImg } from "@/api/registration";
export default {
  props: {
    dialog: {
      type: Object,
      required: true,
    },
    drawerData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      printObj: {
        id: "printMe",
      },
      stuInfo: [],
    };
  },
  created() {
    this.getStuInfo();
  },
  methods: {
    // 导出人员信息图片
    exportImg() {
      this.stuInfo.forEach((item) => {
        if (item.type == 9) {
          this.download(item.data, item.name);
        }
      });
    },
    // 下载图片
    /*
     * imgsrc  图片地址
     * name 图片下载后的名字【包含图片后缀】 如"a.jpg"
     */
    download(link, picName) {
      let img = new Image();
      img.setAttribute("crossOrigin", "Anonymous");
      img.onload = function () {
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        canvas.width = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0, img.width, img.height);
        let url = canvas.toDataURL("images/png");
        let a = document.createElement("a");
        let event = new MouseEvent("click");
        a.download = picName || "default.png";
        a.href = url;
        a.dispatchEvent(event);
      };
      img.src = link + "?v=" + Date.now();
    },

    downloadIamge(imgsrc, name) {
      // downImg({
      //   url: imgsrc,
      //   name: name,
      // }).then((res) => {
      //   console.log(res);
      // });
      //下载图片地址和图片名
      // var image = new Image();
      // // 解决跨域 Canvas 污染问题
      // image.setAttribute("crossOrigin", "anonymous");
      // image.onload = function () {
      //   var canvas = document.createElement("canvas");
      //   canvas.width = image.width;
      //   canvas.height = image.height;
      //   var context = canvas.getContext("2d");
      //   context.drawImage(image, 0, 0, image.width, image.height);
      //   var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
      //   var a = document.createElement("a"); // 生成一个a元素
      //   var event = new MouseEvent("click"); // 创建一个单击事件
      //   a.download = name || "photo"; // 设置图片名称
      //   a.href = url; // 将生成的URL设置为a.href属性
      //   a.dispatchEvent(event); // 触发a的单击事件
      // };
      // image.src = imgsrc;
    },

    printClose() {
      this.dialog.printShowEject = false;
    },
    getStuInfo() {
      getPrint({
        batchId: this.drawerData.batchId,
        personId: this.drawerData.personId,
      }).then((res) => {
        this.stuInfo = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  height: 60vh;
  overflow-y: auto;
}
.basics-information {
  font-size: 16px;
  margin-top: 20px;
  .title {
    text-align: center;
    h1 {
      font-size: 18pt;
    }
  }
  .stuInfo {
    display: flex;
    flex-wrap: wrap;
    .subclass {
      margin-top: 5mm;
      width: 50%;
      .subclass-sub {
        display: flex;
        .subclass-name {
          display: inline-block;
          width: 30%;
          text-align: right;
        }
        .subclass-word {
          margin-left: 20px;
        }
        a {
          margin-left: 20px;
        }
        img {
          margin-left: 20px;
        }
      }
      img {
        vertical-align: top;
        width: 60mm;
        height: 60mm;
      }
    }
  }
}
@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}

html {
  background-color: #ffffff;
  margin: 0px; /* this affects the margin on the html before sending to printer */
}

body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
</style>